
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { EventBus } from '@/store/index'

export const canvasUtils = {
  props: ['item'],
  created() {
    const data_ = {
      framerate: 10,
      canvasScaleY: 1,
      // stage: null,
      // canvas: null,
      // mc: null,
      // shape: null,
      // tick: null,
      // managerLoader: null,
    };
    for(let key in data_) {
      this[key] = data_[key];
    }
    if (!this.isH5Edit) {
      window.AdobeAn = window.AdobeAn || {}
      if(!window.createjs){
        let urls = [this.env.baseUrl + "js/createjs/easeljs-NEXT.min.js", this.env.baseUrl + "js/createjs/preloadjs-NEXT.min.js", this.env.baseUrl + "js/createjs/tweenjs-NEXT.min.js"];
        let attrs = ["createjs", "createjs.LoadQueue", "createjs.Tween"];
        let cb = this.initCreatejs;
        this.dynamicsLoadScripts(urls, attrs, cb, false);
      }else{
        this.initCreatejs(window.createjs)
      }
    }
  },
  computed: {
    lists() {
      return this.item.lists
    },
    styles() {
      return {
        transform: 'rotate(' + this.item.commonAttr.rotate + 'deg)',
        opacity: this.item.commonAttr.opacity,
        width: this.item.conStyles.width,
        height: this.item.conStyles.height,
        backgroundColor: this.item.styles.backgroundColor,
      }
    }
  },
  methods: {
    initCreatejs(createjs) {
      if (!createjs || this.canvas) {
        return
      }
    },
    initStage() {
      if(this.$refs.wbCanvas){
        this.canvas = this.$refs.wbCanvas;
        this.stage = new window.createjs.Stage(this.canvas);
        this.canvasWidHei();
      }
      // this.stage.regX = -this.canvas.width/2;
      // this.stage.regY = -this.canvas.height/2;
    },
    addTick(createjs) {
      this.stage.autoClear = true;
      this.stage.tickChildren = true;
      this.stage.tickEnabled = true;
      this.stage.tickOnUpdate = true;

      createjs.Touch.enable(this.stage);
      this.stage.enableMouseOver(10);
      this.stage.enableDOMEvents(true);
      this.stage.mouseMoveOutside = true;

      createjs.Ticker.timingMode = createjs.Ticker.RAF;//RAF_SYNCHED
      createjs.Ticker.framerate = this.framerate;
      this.tick = this.tick.bind(this);
      createjs.Ticker.off("tick", this.tick);
      createjs.Ticker.on("tick", this.tick);
    },
    canvasWidHei() {
      if(!this.canvas || !this.stage){
        return
      }
      if (this.commonAttr.isFullScreen || this.commonAttr.designWidth > 0) {
        this.resizeScaleStage()
      } else {
        this.canvas.width = this.item.conAttr.width;
        this.canvas.height = this.item.conAttr.height;
      }
    },
    tick(event) {
      if(!event.paused){
        this.stage.update();
      }
    },
    updateShape() {
      this.canvasWidHei();
    },
    resizeScaleStage() {
      let isFullScreen = this.commonAttr.isFullScreen;
      let w = this.commonAttr.designWidth;
      let h = this.commonAttr.designHeight;

      let clientWidth = document.documentElement.clientWidth
      let clientHeight = document.documentElement.clientHeight

      let wid = isFullScreen ? clientWidth : this.item.conAttr.width;
      let hei = isFullScreen ? clientHeight : this.item.conAttr.height;
      let iw = wid * MOBILE_WID_HEI.adaptiveScale;
      let ih = hei * MOBILE_WID_HEI.adaptiveScale;
      let pRatio = window.devicePixelRatio || 1, xRatio = iw / w, yRatio = ih / h;
      
      this.canvasScaleY = pRatio * yRatio;
      this.canvas.width = w * pRatio * xRatio;
      this.canvas.height = h * pRatio * yRatio;
      this.stage.scaleX = pRatio * xRatio;
      this.stage.scaleY = pRatio * yRatio;
      this.stage.update();
    },
    clear(){
      let createjs = window.createjs;
      if(!createjs || !this.stage){
        return
      }
      createjs.Ticker.off("tick", this.tick);
      _.forEach(this.stage.children, (mc) => {
        if(mc.gotoAndStop){
          mc.gotoAndStop(0);
        }
        mc.removeAllEventListeners();
      });
      this.stage.removeAllChildren();
      this.stage.removeAllEventListeners();
      this.stage.enableDOMEvents(false);
      this.stage.mouseMoveOutside = false;
      this.stage.autoClear = false;
      this.stage.tickChildren = false;
      this.stage.tickEnabled = false;
      this.stage.tickOnUpdate = false;
    },
    destroy(){
      this.clear();
      this.stage = null;
      this.canvas = null;
      this.mc = null;
      this.shape = null;
    },
    onRefreshCommonAttr() {
      this.updateShape();
    },
  },
  updated(){
    if(this.isH5Edit){
      this.updateShape()
    }
  },
  beforeUnmount() {
    if(this.isH5Edit) {
      EventBus.$off('refreshCommonAttr', this.onRefreshCommonAttr);
    }
    this.destroy();
  },
}


